
<script setup lang='ts'>
  import { reactive, onMounted, ref } from 'vue';
  import request from '@/api/index';
  import { nameFilter, xmloading, xmtoast, getAssetsFile } from '@/utils/public';
  import barrage from './barrage/index.vue';
  import userlist from './userlist.vue';
  import typeTab from '@/components/typeTab.vue';
  import xmimg from '@/components/xmimg.vue';
  import { activeStatus, lyb_content, lyb_diamand_num } from '@/pinia/getter'
  const userListRef = ref()
  const action = reactive({
    tabberType:1,
    messageList:[] as Array<any>,
    content:'', // 发送的内容
    playMessageKey:0,
    endMessageKey:7,
  })
  const userinfo = reactive({
    image:'',
    name:'',
    user_id:''
  })
  const listQuery = reactive({
    page:1,
    limit:20
  })
  const lyblistQuery = reactive({
    page:1,
    limit:20
  })
  const tabberArr = [
    {key:1,name:'给我留言'},
    {key:2,name:'我的留言'},
  ]
  const handleTabber = (key:number = 1)=>{
    if(key == action.tabberType) return
    action.tabberType = key
    loadSet.value = false
    loadingSet.value = false
    listQuery.page = 1
    action.messageList = []
    getMessageList()
  }
  const getMessageArr = ()=>{
    if(action.playMessageKey == 0) {
      action.playMessageKey = action.endMessageKey + 1
      action.endMessageKey = lyb_content.value.length
    }else {
      action.playMessageKey = 0
      action.endMessageKey = 7
    }
  }
  const openUserList = ()=>{
    userListRef.value.openDialog()
  }
  const userlistChange = (item:any = {})=>{
    const { image='', name='', user_id='' } = item
    userinfo.image = image
    userinfo.name = name
    userinfo.user_id = user_id
  }
  const handleMessage = (text:string = '')=>{
    action.content = text
  }
  const inputChange = ()=>{
    if(action.content.length == 30) {
      xmtoast('留言内容最多为30个字符')
      return
    }
  }
  const handleSubmit = async()=>{
    if(activeStatus.value == 1) return xmtoast('活动暂未开始')
    if(activeStatus.value == 2) return xmtoast('活动已结束')
    if(action.content.length > 30) {
      xmtoast('留言内容最多为30个字符')
      return
    }
    if(!action.content) return xmtoast('请输入发送的留言内容')
    if(!userinfo.user_id) return xmtoast('请选择留言发送人')
    const loading = xmloading('发送中...')
    const res = await request.lybAdd({
      to_user_id:userinfo.user_id,
      content:action.content
    })
    action.content = ''
    Object.assign(userinfo,{
      image:'',
      name:'',
      user_id:''
    })
    loading.close()
    xmtoast('发送成功',false)
  }
  const loadingSet = ref(false); // 是否处于加载状态
  const loadSet = ref(true); // 是否已加载完成 不再触发 load 事件
  const listload = ()=> {
    if(loadSet.value || action.messageList.length == 0) return
    listQuery.page += 1
    getMessageList();
  };
  const getMessageList = async()=>{
    let res = {
      data:{
        list:[]
      }
    }
    if(action.tabberType == 1) {
      res = await request.lybToUserList(listQuery)
    }
    if(action.tabberType == 2) {
      res = await request.lybFromUserList(listQuery)
    }
    const { list=[] } = res?.data || {}
    // 列表返回空 禁止触底事件
    if(list.length == 0) {
      loadSet.value = true
      return
    }
    loadSet.value = false
    loadingSet.value = false
    action.messageList = [...action.messageList,...list]
    if(list.length < listQuery.limit) {
      loadSet.value = true
    }
  }
  onMounted(()=>{
    getMessageList()
  })
</script>

<template>
  <div class="messageBox">
    <div class="backBorder">
      <div class="backImage">
        <barrage />
        <div class="recipient flex-align">
          <div @click="openUserList" class="user flex-align">
            <xmimg :src="userinfo.image ? userinfo.image : 'message/noneImg.png'" class="iconImg" />
            <div class="nickName">{{ userinfo.name ? userinfo.name : '+选择接收人' }}</div>
          </div>
          <dl class="tipsFont">
            <dt>每句留言<span>{{ lyb_diamand_num }}钻</span></dt>
            <dd>人工审核后，全平台直播间飘屏</dd>
          </dl>
        </div>
        <div class="inputBackColor flex-align">
          <input
            type="text"
            maxlength="30"
            v-model="action.content"
            @input="inputChange"
            placeholder="请输入留言 (30字)…">
            <xmimg @click="handleSubmit" src="message/submitBut.png" class="submitImg" />
        </div>
        <dl class="messageArr">
          <dt class="flex-align-between">
            <span>选择留言:</span>
            <div @click="getMessageArr" class="but flex-align">
              <xmimg src="message/renewIcon.png" class="iconImg" />
               <span>换一批</span>
            </div>
          </dt>
          <dd class="flex-start-wrap">
            <template v-for="(item,index) in lyb_content">
              <div
                v-show="index >= action.playMessageKey && index <= action.endMessageKey"
                @click="handleMessage(item)"
                class="text">{{ item }}
              </div>
            </template>
          </dd>
        </dl>
      </div>
    </div>
    <typeTab :tabs="tabberArr" @change="handleTabber" />
    <van-list
      class="messageList"
      :offset="30"
      v-model:loading="loadingSet"
      :finished="loadSet"
      @load="listload">
      <template v-if="action.messageList.length > 0">
        <div v-for="item in action.messageList" class="listBack flex">
          <img :src="item.image" class="portrait">
          <div class="infoText">
            <dl class="nickName flex-align">
              <dt>{{ nameFilter(item.nickname) }}</dt>
              <dd>{{ item.created_at }}</dd>
            </dl>
            <div class="text">{{ item.content }}</div>
          </div>
        </div>
      </template>
      <div v-else class="listEmptyTips">
        <xmimg src="message/listNoneIcon.png" class="tipsIconImg" />
        <span>暂无留言</span>
      </div>
    </van-list>
    <userlist ref="userListRef" @change="userlistChange" />
  </div>
</template>

<style lang='scss' scoped>
  .messageBox {
    padding-top: 11px;
    .backBorder {
      width: 343px;
      margin: 0 auto;
      padding: 1px;
      box-sizing: border-box;
      border-radius: 30px;
      background: var(--messageBorderColor);
    }
    .backImage {
      border-radius: 28px;
      background: var(--messageBackColor);
      display: flex;
      flex-direction: column;
      .recipient {
        padding: 1px 0 0 10px;
        box-sizing: border-box;
        background: var(--messageSetUserBoxBack);
        .user {
          flex: 1;
          height: 100%;
          box-sizing: border-box;
          .iconImg {
            overflow: hidden;
            width: 22px;
            height: 22px;
            margin-right: 4px;
            border-radius: 100%;
          }
          .nickName {
            flex: 1;
            color: var(--messageSetUserNickNameFontColor);
            font-size: 12px;
            font-weight: 500;
          }
        }
        .tipsFont {
          width: max-content;
          line-height: 14px;
          color: var(--messageSetUserTipsFontColor);
          font-size: 10px;
          padding: 4px 10px 4px 30px;
          box-sizing: border-box;
          dt {
            margin-bottom: 2px;
            span {
              color: var(--messageSetUserTipsHighlightFontColor);
            }
          }
          dt, dd {
            font-size: 10px;
            text-align: right;
          }
        }
      }
      
      .inputBackColor {
        width: 100%;
        height: 52px;
        padding: 0 8px;
        box-sizing: border-box;
        background: var(--messageSetBoxBackColor);
        input {
          flex: 1;
          height: 36px;
          margin: 0 8px 0 0;
          padding: 0 12px;
          box-sizing: border-box;
          color: var(--messageInputFontColor);
          font-size: 14px;
          font-weight: 500;
          line-height: 14px;
          background: var(--messageInputBackColor);
          border-radius: 20px;
        }
        input::-webkit-input-placeholder {
          color: var(--messageInputTipsFontColor);
        }
        .submitImg {
          width: 70px;
          height: 36px;
        }
      }
      .messageArr {
        flex: 1;
        overflow: hidden;
        padding: 12px 14px;
        display: flex;
        flex-direction: column;
        dt {
          color: var(--messageListTitleFontColor);
          font-size: 14px;
          font-weight: 500;
          line-height: 13px;
          margin-bottom: 5px;
          .but {
            color: var(--messageRenewFontColor);
            .iconImg {
              width: 14px;
              height: 14px;
              margin-right: 4px;
            }
          }
        }
        dd {
          flex: 1;
          overflow-x: hidden;
          overflow-y: auto;
          .text {
            width: max-content;
            height: max-content;
            color: var(--messageListFontColor);
            font-size: 14px;
            line-height: 16px;
            font-weight: 400;
            margin: 4px 4px 0 0;
            padding: 4px 8px;
            box-sizing: border-box;
            background: var(--messageListFontBackColor);
            border-radius: 12px;
            border: var(--messageListFontBorder);
          }
        }
      }
    }
    .typeTab {
      margin: 24px auto 0;
    }
    .messageList::-webkit-scrollbar {
      display: none;
    }
    .messageList {
      overflow-y: auto;
      overflow-x: hidden;
      height: 500px;
      margin-top: 10px;
      padding: 2px 16px 0;
      box-sizing: border-box;
      :deep(.listBackBorder) {
        border-radius: 16px;
        margin-bottom: 12px;
        .contBack {
          border-radius: 14px;
        }
      }
      .listBack {
        width: 100%;
        margin-bottom: 12px;
        padding: 12px;
        box-sizing: border-box;
        background: var(--messageUserBackColor);
        border-radius: 16px;
        border: var(--messageUserBorder);
        .portrait {
          overflow: hidden;
          width: 32px;
          min-width: 32px;
          max-width: 32px;
          height: 32px;
          margin-right: 8px;
          border-radius: 43px;
          box-sizing: border-box;
          border: var(--messageUserPortraitBorder);
        }
        .infoText {
          .nickName {
            margin-bottom: 8px;
            dt {
              color: var(--messageUserNickNameFontColor);
              font-size: 14px;
              font-weight: 500;
              margin-right: 8px;
            }
            dd {
              color: var(--messageUserTimeFontColor);
              font-weight: 400;
              font-size: 12px;
            }
          }
          .text {
            flex: 1;
            color: var(--messageUserMessageFontColor);
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            padding: 12px 10px;
            box-sizing: border-box;
            background: var(--messageUserMessageBackColor);
            border-radius: 0px 8px 8px 8px;
          }
        }
      }
      .listBack:nth-last-child(1) {
        margin-bottom: 0;
      }
      .listEmptyTips{
        span {
          color: var(--messageListEmptyTipsFontColor);
        }
      }
    }
  }
</style>